<template>
  <transition name="fade">
    <div v-if="show" class="card-uploading">
          <div class="icon-wrap">
              <div v-if="!succeed" class="circle-icon revolution">
              </div>
              <div v-else class="tick-icon">
              </div>
          </div>
          <slot></slot>
      </div>
    </transition>
</template>

<script>
export default {
  components: {},
  data () {
    return {}
  },
  props: {
    show: {
      type: Boolean,
      default () {
        return false
      }
    },
    succeed: {
      type: Boolean,
      default () {
        return false
      }
    }
  },
  computed: {},
  created () {},
  mounted () {},
  methods: {}
}
</script>

<style  scoped>
.card-uploading{
    z-index: 2023;
    border-radius: 2px;
    box-shadow: $shadow3;
    position: fixed;
    left: 0px;
    right: 0px;
    top: 100px;
    width: 150px;
    margin: 0 auto;
    padding: 12px;
    display: flex;
    align-items: center;
    .icon-wrap{
        width: 24px;
    }
    .circle-icon{
        border-radius: 50%;
        width: 15px;
        height: 15px;
        border: 3px solid $primary;
        border-bottom:3px solid rgba(255, 255, 255, 0);
    }
    .tick-icon{
        width: 14px;
        height: 8px;
        margin-bottom:6px ;
        transform: rotate(45deg);
        transform-origin: 50% 50%;
        -webkit-transform: rotate(-45deg);
        -webkit-transform-origin: 50% 50%;
        border-left: 3px solid $success;
        border-bottom: 3px solid $success;
    }
}
.revolution {
  -webkit-animation: revolution 500ms linear infinite;
  animation: revolution 500ms linear infinite;
}
@-webkit-keyframes revolution {
  0% { -webkit-transform: rotate(0deg) }
  100% { -webkit-transform: rotate(360deg) }
}
@keyframes revolution {
  0% { transform: rotate(0deg) }
  100% { transform: rotate(360deg) }
}
.fade-enter {
  transform: scale(0);
  transform: translateY(-100px);
  opacity: 0;
}
.fade-enter-active {
  transition: all .3s ease-in-out ;
}
.fade-enter-to{

}
.fade-leave{

}
.fade-leave-active{
  transition: all .3s ease-in-out ;
}
.fade-leave-to{
  transform: scale(0);
  transform: translateY(-100px);
  opacity: 0;
}
</style>
